/** 
  data: 2019年6月15日08:41:03
  latest update: 2019年6月18日10:37:39
  author: liump
  desc: 熔纤 熔纤工作内容弹框,该弹框分为两种情况
    1. 节点是 GJ GF JTH,工作内容为成端 W-CD
    2. 节点为普通节点,工作内容为熔接 W-RJ

 */
<template>
  <el-card class="amap-melt-work-dialog">
    <div slot="header" class="clearfix">
      <span style="font-size:18px;">熔纤工作内容</span>
    </div>
    <el-form>
      <el-form-item label="操作点:" :label-width="labelWidth">
        <el-col style="text-align:left">{{ tag }}</el-col>
      </el-form-item>
      <el-form-item label="经纬度:" :label-width="labelWidth">
        <el-col style="text-align:left">{{ lnglat }}</el-col>
      </el-form-item>
      <el-form-item label="线名称:" :label-width="labelWidth">
        <el-select v-model="lineValue" placeholder="请选择">
          <el-option v-for="item in lineSelect" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工作内容:" :label-width="labelWidth">
        <el-cascader :options="options" v-model="optionId" @focus="handleGetLineSelect"></el-cascader>
      </el-form-item>
      <el-form-item label="数量:" :label-width="labelWidth">
        <el-col :span="14">
          <el-input-number v-model="num" :controls="false" class="input-number" :min="1" @blur="handleBlurNum"></el-input-number>
        </el-col>
        <el-col :span="6" :offset="1" style="text-align:left">{{ unit[0] }}</el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleMeltWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleMeltWorkConfirm">确定</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'amapMeltWorkDialog',
  data() {
    return {
      labelWidth: '72px', // label width
      options: [], // 级联数组
      optionId: [], // 级联中被选中的值的数组
      workMessage: [], // 工作内容文本数组
      unit: [], // 获取单位的数组
      tag: '', // 设备点
      lnglat: '', // 设备点的经纬度
      lineSelect: [], // 线程下拉框数组
      lineValue: '', // 线程下拉框被选中的值
      num: 1, // 数量默认为1
      point_code: 0 // 当前节点编号的初始化
    }
  },
  methods: {
    /**
     * 获取节点编号,设备点,设备经纬度的方法
     * @method handleInitData
     * @author liump
     * @date 2019年6月18日11:18:05
     * @param { Number } id 节点编号
     * @param { String } tag 设备点
     * @param { String } lnglat 设备点经纬度
     */
    handleInitData(id, tag, lnglat) {
      this.point_code = id
      this.tag = tag
      this.lnglat = lnglat
    },
    /**
     * 请求工作内容级联数据
     * @method getLineWorkData
     * @param { String } tagType 该参数用于调接口时候的参数
     * @param { Number } id 当前节点编号
     */
    getMeltWorkData(tagType) {
      let success = res => {
        res = res.data
        if (res.flag == 1) {
          let data = res.data
          this.options = res.data
        }
        // this.options = res.data // 测试的模拟数据
      }
      let error = res => {}
      let data = {
        iconType: tagType
      }
      let param = {
        url: '/api/web/ptwo/getWorkOptRela',
        methods: 'post',
        data: data,
        success: success,
        error: error
      }
      this.$https(param)
      // mock的模拟数据
      // this.$axios.get("/mock/amapWorkMessage.json")
      //   .then(res => {
      //     success(res);
      //   });
    },
    /**
     * 弹框中点下拉框数据的渲染方法
     * @method handleShowLine
     * @author liump
     * @param { Array } list 线程下拉框的渲染数组
     */
    handleShowLine(list) {
      this.lineSelect = list
    },
    /**
     * 熔纤工作内容弹框的确认方法
     * @method handleMeltWorkConfirm
     * @author liump
     */
    handleMeltWorkConfirm() {
      // 熔纤由于表格的更改,现在是属于垂直
      let obj = {
        at_point: 0, // 工作点，垂直作业使用
        end_point: 0, // 结束点，水平作业使用
        start_point: 0, // 起始点, 水平作业使用
        work_direction: 1, // 工作方向 0.水平 1.垂直
        work_length: 0, // 工作长度
        work_option: 'string', // 工作选项id
        work_type: 4, // 1.管道 2.线路 3.设备 4.溶纤 5.跳纤
        workload: 1 // workload (integer, optional): 重复次数
      }
      // 假设为垂直
      obj.at_point = this.point_code
      // 获取 optionId
      obj.work_option = this.optionId[this.optionId.length - 1] + ''
      // 获取数量
      obj.workload = this.num

      // 表格渲染相关数据
      obj.line = this.lineValue
      obj.equipment_point = this.tag

      // 遍历 optionId 获取 workMessage 数组
      this.optionId.forEach(el => {
        this.getArray(this.options, el, this.workMessage)
      })
      obj.workMessage = this.workMessage.join(' | ')
      obj.unit = this.unit[0]

      // 向父组件传递
      this.$emit('handleMeltWorkConfirm', obj)
      // 清空数据
      this.handleDataInit()
    },
    /**
     * 根据工作内容获取单位的方法
     * @method handleGetLineSelect
     * @author liump
     * @date 2019年6月18日11:22:56
     */
    handleGetLineSelect() {
      // 根据 optionId 的最后一个元素获取单位
      let optionId = this.optionId[this.optionId.length - 1]

      let getUnit = (data, optionId, list) => {
        for (var i in data) {
          if (data[i].value == optionId) {
            list.push(data[i].unit)
            break
          } else {
            getUnit(data[i].children, optionId, list)
          }
        }
      }
      getUnit(this.options, optionId, this.unit)
    },
    /**
     * 取消按钮清空数据,通知父组件关闭弹框
     * @method handleMeltWorkCancel
     */
    handleMeltWorkCancel() {
      // 清空数据
      this.handleDataInit()
      this.$emit('handleMeltWorkCancel')
    },
    /**
     * 遍历树形结构,根据树形结构找到指定的工作内容文本
     * @method getArray
     * @param { Array } data 要遍历的树形数组
     * @param { String } optionId 指定条件
     * @param { Array } list 工作内容数组,向该数组中 push 工作内容
     */
    getArray(data, optionId, list) {
      for (var i in data) {
        if (data[i].value == optionId) {
          // 在 workMessage 数组中添加 label
          list.push(data[i].label)
          break
        } else {
          this.getArray(data[i].children, optionId, list)
        }
      }
    },
    /**
     * 用于确认和取消后清空数据
     * @method handleDataInit
     */
    handleDataInit() {
      this.options = []
      this.optionId = []
      this.tag = ''
      this.lnglat = ''
      this.lineSelect = []
      this.lineValue = ''
      this.num = 1
      this.point_code = 0
      this.unit = []
      this.workMessage = []
    },
    /**
     * 当数量失去焦点的时候如果没有值补全值
     * @method handleBlurNum
     * @author liump
     */
    handleBlurNum(){
      if (!this.num) {
        this.num = 1
      }
    }
  }
}
</script>

<style scoped>
.amap-melt-work-dialog {
  width: 260px;
  z-index: 100;
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 12px;
}
.amap-melt-work-dialog .input-number{
  width: 100%;
}
</style>